<template>
  <div class="product">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">{{ $t("lang.product") }}</div>
          <div class="flex-left-item-list">
            <div
              v-for="(item, index) in attributes"
              :class="[
                'flex-left-item',
                item.checked ? 'flex-left-item_checked' : '',
              ]"
              :key="index"
              @click="typeChange(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="flex-container-right">
          <div>
            <h1 v-if="lastAttr != null">
              {{ attributes[this.lastAttr].name }}
            </h1>
            <div class="product-list">
              <div
                class="product-list-item"
                v-for="(item, index) in product.data"
                :key="index"
              >
                <div class="item-left">
                  <img :src="item.imgs[0]" alt="" />
                </div>
                <div class="item-right">
                  <h3 class="title">
                    {{ item.name }}
                  </h3>
                  <div class="des">
                    {{ item.remark }}
                  </div>
                  <Button class="btn-more" type="primary" @click="detail(item)"
                    >Read More</Button
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="page-box">
            <Page
              :total="product.total"
              :page-size="product.pageSize"
              :current="product.current"
              size="small"
              show-total
              @on-change="pageChange"
            />
          </div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
import { getProducts } from "@/utils/api.js";
import { mapGetters } from "vuex";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  data() {
    return {
      product: {
        current: 1,
        pageSize: 10,
        total: 0,
        data: [],
      },
      attributes: [],
      lastAttr: null,
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.product",
          route: "",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["pAttributes"]),
  },
  created() {
    console.log("jinlai", this.attributes);
    this.typeId = this.$route.params.typeId || "";
    this.formatAtr(this.pAttributes);
    this.fetchProducts();
  },
  watch: {
    pAttributes: {
      handler: function (newValue) {
        this.formatAtr(newValue);
      },
    },
  },
  methods: {
    detail(e) {
      localStorage.setItem(
        "product_attribute",
        JSON.stringify({
          current: this.lastAttr,
          data: this.attributes,
        })
      );
      localStorage.setItem("product", JSON.stringify(e));
      this.$router.push("/product/detail/" + e.id);
    },
    fetchProducts() {
      getProducts({
        typeId: this.typeId,
        pageSize: this.product.pageSize,
        current: this.product.current,
      }).then((res) => {
        let data = res.data.data;
        let total = res.data.total;
        data.forEach((item, index) => {
          item.imgs = item.imgs.split(",");
          data[index] = item;
        });
        this.product.data = data;
        this.product.total = total;
        this.$forceUpdate();
      });
    },
    pageChange(e) {
      this.product.current = e;
      this.fetchProducts();
    },
    typeChange(i) {
      if (this.lastAttr != null) {
        this.attributes[this.lastAttr].checked = false;
      }
      this.attributes[i].checked = true;
      this.typeId = this.attributes[i].id;
      this.lastAttr = i;
      this.product.current = 1;
      this.fetchProducts();
    },
    formatAtr(d) {
      let data = d;
      data.forEach((item, index) => {
        if (item.id == this.typeId) {
          item.checked = true;
          this.lastAttr = index;
        } else {
          item.checked = false;
        }
        data[index] = item;
      });
      this.attributes = data;
    },
  },
};
</script>
<style lang="scss" scoped>
.product {
  .product-list {
    .product-list-item {
      display: flex;
      border-bottom: 1px dotted #e4e4e4;
      margin-top: 15px;
      .item-left {
        width: 250px;
        height: 250px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-right {
        margin-left: 10px;
        width: 840px;
        .btn-more {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>